.panel {
  position: relative;
  background: #ffffff;
  padding: @base-margin @default-padding;
  border: 0;
  margin-bottom: @default-padding;
  .box-shadow(none);

  &.panel-headerless .panel-body {
    padding-top: 0;
  }

  .panel-heading {
    position: relative;
    padding: 0;
    margin: 0;
    background: none;
    font-size: @font-size-h4;
    padding-bottom: @default-padding/2;
    border-bottom: 2px solid #f5f5f5;
    &:extend(.clearfix all);

    > .panel-title {
      float: left;
      font-size: @font-size-h4;

      > a {
        color: inherit;
      }
    }

    > .panel-options {
      float: right;
      font-size: @font-size-base;

      a {
        display: inline-block;
        color: @main-text-color;
        margin-left: @base-padding - 3;
        line-height: 1;

        i {
          line-height: 1;
        }

        &[data-toggle="panel"] {

          span {
            display: block;
            font-size: 16px;
            width: 10px;
            text-align: center;

            &.expand-icon {
              display: none;
              font-size: 18px;
            }
          }
        }

        &[data-toggle="remove"] {
          font-size: 18px;
        }

        &:first-child {
          margin-left: 0;
        }
      }

      // Tabs
      .nav-tabs {
        border: 0;

        > li {
          border: 0;

          > a {
            padding: 0;
            border: 0;
            margin-left: @base-padding + 5;
            color: @main-text-color;
            background: none;

            &:hover {
              background: none;
            }
          }

          &.active > a {
            color: darken(@main-text-color, 30%);
          }
        }
      }
    }
  }

  .panel-body {
    padding: 0;
    padding-top: @base-margin;
    color: @main-text-color;

    &.no-padding {
      padding: 0;
      margin-top: -2px;
      margin-left: -@default-padding;
      margin-right: -@default-padding;
      margin-bottom: -@base-margin;
    }

    &.panel-border {
      border-top: 1px solid #f5f5f5;
      padding-top: @default-padding;
    }

    p {
      margin-bottom: 0;

      + p {
        margin-top: @default-padding/2;
      }
    }
  }

  .panel-disabled {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: fade(#FFF, 70%);
  }

  // Collapsed panel
  &.collapsed {

    .panel-heading {

      .panel-options {

        a[data-toggle="panel"] {

          .collapse-icon {
            display: none;
          }

          .expand-icon {
            display: block;
          }
        }
      }
    }

    > .panel-body, > .table {
      display: none;
    }
  }


  // Panel Border
  &.panel-border {
    border: 1px solid #cccccc;
  }


  // Panel Shadow
  &.panel-shadow {
    .box-shadow(~"0 1px 1px rgba(0,1,1,.08)");
  }


  // Panel Styles
  &.panel-default {

  }

  &.panel-inverted {
    background: @brand-primary;
    color: #FFF;

    > .panel-heading {
      border-bottom-color: #393c3e;
    }

    > .panel-disabled {
      background: fade(@brand-primary, 50%);
    }
  }

  &.panel-tabs {
    background: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: @default-padding - @base-margin;
    padding-top: 7px;

    > .panel-heading {
      border-bottom: 0;

      .nav-tabs {
        position: relative;
        margin-bottom: -@base-margin - 1;
        margin-right: -2px;

        > li {

          > a {
            position: relative;
            background-color: #f5f5f5;
            padding: @base-padding + 5 @base-margin;
            margin-left: @base-padding/2;
            top: -6px;
          }

          &:hover, &.active {

            > a {
              background-color: #FFF;
            }
          }
        }
      }
    }

    > .panel-body {
      background: #FFF;
      padding: @base-margin @default-padding;
    }
  }


  &.panel-flat {
    background: none;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;

    .panel-heading {
      border-bottom-color: #dddddd;
    }

    .panel-disabled {
      background: fade(@background-color, 60%);
    }
  }

  &.panel-success {
    .xe-panel-variation(@brand-success; #FFF);
  }

  &.panel-info {
    .xe-panel-variation(@brand-info; #FFF);
  }

  &.panel-warning {
    .xe-panel-variation(@brand-warning; #FFF);
  }

  &.panel-danger {
    .xe-panel-variation(@brand-danger; #FFF);
  }

  &.panel-red {
    .xe-panel-variation(@xe-red; #FFF);
  }

  &.panel-black {
    .xe-panel-variation(@xe-black; #FFF);
  }

  &.panel-purple {
    .xe-panel-variation(@xe-purple; #FFF);
  }

  &.panel-blue {
    .xe-panel-variation(@xe-blue; #FFF);
  }

  &.panel-light-blue {
    .xe-panel-variation(@xe-light-blue; #FFF);
  }

  &.panel-gray {
    .xe-panel-variation(darken(@xe-gray, 5%); darken(@main-text-color, 15%));
  }

  // Different styling panels
  &.panel-color {

    .panel-heading {
      margin-top: -@base-margin;
      margin-left: -@default-padding;
      margin-right: -@default-padding;
      padding: @base-margin @default-padding;
      border-bottom: 0;
    }

    &.collapsed {

      > .panel-heading {
        margin-bottom: -@base-margin;
      }
    }
  }
}


.xe-panel-variation(@bg-color; @text-color) {
  .panel-heading {
    background-color: @bg-color;
    color: @text-color;

    > .panel-title {
      color: @text-color;

      > a {
        color: inherit;
      }
    }

    > .panel-options {
      color: @text-color;

      a {
        color: fade(@text-color, 60%);

        &:hover {
          color: @text-color;
        }
      }
    }
  }

  > .panel-disabled {
    background-color: fade(@bg-color, 15%);
  }
}